<template>
  <base-container>
    <div class="w-full h-full px-10px">
      <el-row :gutter="10">
        <el-col :span="2" class="h-full bg-[#fff]">
          <el-anchor
            :container="containerRef"
            :select-scroll-top="true"
            direction="vertical"
            type="default"
            :offset="30"
            @click="handleClick"
          >
            <el-anchor-link href="#part1" title="商品信息" />
            <el-anchor-link href="#part2" title="租赁设置" />
            <el-anchor-link href="#part3" title="方案设置" />
            <el-anchor-link href="#part4" title="物流信息" />
          </el-anchor>
        </el-col>
        <el-col :span="22">
          <div ref="containerRef" style="height: 82vh; overflow-y: auto" class="p-20px h-full bg-[#fff]">
            <base-card title="商品信息" id="part1">
              <el-form ref="formRef" :model="formData" label-width="120px">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="商品编号" prop="keyword">
                      <span>{{ formData.id }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="商品类型" prop="keyword">
                      <el-tag type="primary" plain color="#fff">
                        {{ formData.productTypeDesc }}
                      </el-tag>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="租售类型" prop="keyword">
                      <span>{{ formData.rentSaleTypeDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品标签" prop="keyword">
                      <span v-for="item in formData.productLabel" :key="item" class="mr-5px">
                        <el-tag type="primary" plain color="#fff">{{ item }}</el-tag>
                      </span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品类目">
                      <span>{{ formData.firstCategoryName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品图片">
                      <el-image
                        v-for="item in formData.imageUrlList"
                        :key="item"
                        :src="item"
                        style="width: 120px; height: 120px"
                      ></el-image>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品视频">
                      <el-image :src="formData.videoUrl"></el-image>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品详情">
                      <div v-html="formData.productDetail"></div>
                      <!-- {{ formData.productDetail }} -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品参数：" style="width: 100%">
                      <el-descriptions class="margin-top" :column="2" :size="size" border style="width: 100%">
                        <el-descriptions-item
                          :label="item.parameterValue"
                          v-for="(item, index) in formData.productParameterList"
                          :key="index"
                        >
                          {{ item.parameterName }}
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="商品配件">
                      <avue-crud
                        :option="productComponentListtableOption"
                        :header-cell-style="{ background: '#eee' }"
                        :data="formData.productComponentList ? formData.productComponentList : []"
                      ></avue-crud>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="增值服务：">
                      <avue-crud
                        :option="productAdditionalServiceRelateListListtableOption"
                        :header-cell-style="{ background: '#eee' }"
                        :data="
                          formData.productAdditionalServiceRelateList ? formData.productAdditionalServiceRelateList : []
                        "
                      ></avue-crud>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </base-card>
            <base-card title="租赁设置" id="part2">
              <el-form ref="formRef" :model="formData" label-width="120px">
                <el-row :gutter="10">
                  <el-col :span="24">
                    <el-form-item label="租赁对象：">
                      <span>{{ formData.rentObjectDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="C端渠道：">
                      <el-tag type="success">{{ formData.channelTypeDesc }}</el-tag>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="渠道方案：">
                      <span>{{ formData.rentPlanDesc }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </base-card>
            <base-card title="方案设置" id="part3">
              <el-form ref="form" :model="formData" label-width="120px">
                <el-row :gutter="10">
                  <el-col :span="24">
                    <el-form-item label="账期类型：">
                      <span>{{ formData.periodTypeDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="租赁模式：">
                      <span>{{ formData.rentModelTypeDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="颜色">
                      <span class="mr-5px" v-for="item in formData.colors" :key="item">
                        <el-tag type="info">{{ item.specName }}</el-tag>
                      </span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="内存">
                      <span class="mr-5px" v-for="item in formData.memory" :key="item">
                        <el-tag type="info">{{ item.specName }}</el-tag>
                      </span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="租赁价格：">
                      <avue-crud
                        :option="productSkuListListTableOption"
                        :header-cell-style="{ background: '#eee' }"
                        :data="formData.productSkuList ? formData.productSkuList : []"
                      >
                        <template #rentModelType>
                          <div>
                            <!-- <div>{{ row.productRentModelTypeList[0].rentModelTypeStr?row.productRentModelTypeList[1].rentModelTypeStr:'-' }}</div>
                            <div>{{ row.productRentModelTypeList[1].rentModelTypeStr ?row.productRentModelTypeList[1].rentModelTypeStr:'-' }}</div> -->
                          </div>
                        </template>
                        <template #imageUrl="{ row }">
                          <div>
                            <el-image :src="row.imageUrl"></el-image>
                            <div class="flex justify-center">
                              <div>{{ row.productSkuSpecList[0].specName }}</div>
                              <div>{{ "白色" }}</div>
                            </div>
                          </div>
                        </template>
                        <template #officialPrice="{ row }">
                          <div><span class="text-[#aaa]">官方价格：</span>{{ row.officialPrice }}</div>
                          <div><span class="text-[#aaa]">采购价格：</span>{{ row.purchasePrice }}</div>
                          <div><span class="text-[#aaa]">库存：</span>{{ row.quantity }}</div>
                        </template>
                        <template #days="{ row }">
                          <div>{{ row.days }}天</div>
                        </template>
                      </avue-crud>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </base-card>
            <base-card title="物流信息" id="part4">
              <el-form ref="formRef" :model="formData" label-width="120px">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-form-item label="发货邮费：">
                      <span>{{ formData.deliveryPostageDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发货地址：">
                      <span>{{ formData.deliveryAddress }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="归还邮费：">
                      <span>{{ formData.returnPostageDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="归还地址：">
                      <avue-crud
                        :option="productReturnAddressListTableOption"
                        :header-cell-style="{ background: '#eee' }"
                        :data="formData.productReturnAddressList ? formData.productReturnAddressList : []"
                      ></avue-crud>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </base-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </base-container>
</template>

<script setup>
  import { ref } from "vue";
  const route = useRoute();
  import {
    productComponentListtableOption,
    productAdditionalServiceRelateListListtableOption,
    productSkuListListTableOption,
    productReturnAddressListTableOption,
  } from "@/crudOption/product/CheckProduct.js";
  const props = defineProps({
    formData: {
      type: Object,
      default: () => ({}),
    },
  });
  const size = ref("default");
  const iconStyle = computed(() => {
    const marginMap = {
      large: "8px",
      default: "6px",
      small: "4px",
    };
    return {
      marginRight: marginMap[size.value] || marginMap.default,
    };
  });
  const formRef = ref(null);
  const containerRef = ref(null);
  const handleClick = e => {
    e.preventDefault();
  };
</script>
<style lang="scss" scoped></style>
